<template>
    <div>
        <div v-loading="loading" style="position: relative">
            <div style="position:absolute;left:0;top:0;opacity:0.5;height: 35px;width: 100%;z-index: 9999;display: flex;justify-content: flex-start;align-items: center;padding: 0 20px">
            <el-button size="mini" @click="changeName('indoor')">室内</el-button>
            </div>
            <div ref="environment"></div>
        </div>
    </div>
</template>
<script>
import {
  Scene,
  PerspectiveCamera,
  WebGL1Renderer,
  AmbientLight,
  CubeTextureLoader,
  PlaneGeometry,
  MeshLambertMaterial,
  BoxGeometry,
  Mesh,
  MeshBasicMaterial, 
  PointLight,
  SpotLight,
  AxesHelper
} from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
export default {
    data(){
        return{
            loading:true,
            environment:{},
            nameDefault:'indoor'
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            let scene=new Scene(); //创建场景
            this.loading=false; //加载场景

            let camera =new PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);//创建相机
            camera.position.set(0, 0, 300); //设置相机的位置
            camera.lookAt(scene.position); //根据坐标观察场景目标

            //创建长方体
            let geometry=new BoxGeometry(100, 100, 100);
            //创建一个材质对象Material
            const material =new MeshLambertMaterial({
                color: 0xff0000,//0xff0000设置材质颜色为红色
                transparent:true,//开启透明
                opacity:0.5,//设置透明度
            });  
            // 两个参数分别为几何体geometry、材质material
            const mesh =new Mesh(geometry, material); //网格模型对象Mesh
            mesh.position.set(10,10,10);//设置物品在坐标系中的位置
            scene.add(mesh);//将长方体加入到场景中

            let renderer=new WebGL1Renderer({antialias: true});//创建渲染器，并消除锯齿
            // 背景颜色
            renderer.setClearColor(0xffffff)
            // 设置设备像素比
            renderer.setPixelRatio(window.devicePixelRatio)
            renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js输出的画布的尺寸
            renderer.render(scene, camera); //渲染方法

            // 设置相机控件轨道控制器OrbitControls
            const controls = new OrbitControls(camera, renderer.domElement);
            // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
            controls.addEventListener('change', function () {
                renderer.render(scene, camera); //执行渲染操作
            });//监听鼠标、键盘事件

            //设置光源
            //点光源：两个参数分别表示光源颜色和光照强度
            // 参数1：0xffffff是纯白光,表示光源颜色
            // 参数2：1.0,表示光照强度，可以根据需要调整
            const pointLight = new PointLight(0xffffff, 1.0);
            //点光源位置
            pointLight.position.set(400, 200, 300);//点光源放在x轴上
            scene.add(pointLight);//将光源加入到场景中

            // AxesHelper：辅助观察的坐标系
            const axesHelper = new AxesHelper(150);
            scene.add(axesHelper);

            this.$refs.environment.appendChild(renderer.domElement); //将输出的画布canvas放到某一个元素下

        },
        changeName(type){

        }
    }

}
</script>